<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <svg
      width="120"
      height="120"
      viewBox="-50 -50 100 100"
      xmlns="http://www.w3.org/2000/svg"
      version="1.1"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      
      <rect x="-10" y="-10" width="20" height="20" fill="#f00">
        <animateTransform id="a1" attributeName="transform"
            attributeType="XML"
            type="translate"
            to="20"
            dur="2s"
            additive="sum"
            repeatCount="1" fill="freeze"/>

        <animateTransform attributeName="transform"
            attributeType="XML"
            type="rotate"
            from="0 0 0"
            to="90 0 0"
            dur="2s"
            additive=""
            accumulate="sum"
            begin="a1.end"
            repeatCount="1" fill="freeze"/>
      </rect>
    </svg>
  </body>
</html>
